<template>
    <div class="app-container home">
      <div class="wrapbox">
        <div class="top_box">
          <el-row :gutter="20">
            <el-col :span="5">
              <div>
                <el-statistic group-separator="," :value="todayData.userLogin" title="登录用户"></el-statistic>
              </div>
            </el-col>
            <el-col :span="5">
              <div>
                <el-statistic group-separator="," decimal-separator="." :value="todayData.userAdd" title="新增用户">
                  <template slot="prefix">
                    <i class="el-icon-s-flag" style="color: red"></i>
                  </template>
                  <template slot="suffix">
                    <i class="el-icon-s-flag" style="color: blue"></i>
                  </template>
                </el-statistic>
              </div>
            </el-col>
            
          </el-row>
        </div>
        
        <div style="border: 1px solid #ddd; border-radius: 10px; margin-top: 20px">
          <el-row class="homerow">
            <el-col :span="11" class="homecol">
              <div class="chartbox" ref="boxone"></div>
            </el-col>
            <el-col :span="11" class="homecol">
              <el-date-picker v-model="yearValue" type="year" placeholder="选择年" format="yyyy" value-format="yyyy"
                @change="changeYear">
              </el-date-picker>
              <div class="chartbox" ref="boxtwo"></div>
            </el-col>
          </el-row>
  
          <el-row class="homerow">
            <el-col :span="11" class="homecol">
              <el-date-picker v-model="monthValue" type="month" placeholder="选择月" value-format="yyyy-MM"
                @change="changeMonth">
              </el-date-picker>
              <div class="chartbox" ref="boxthree"></div>
            </el-col>
            <el-col :span="11"> </el-col>
          </el-row>
        </div>
        <!-- <div style="border: 1px solid #ddd; border-radius: 10px; margin-top: 20px">
          <el-row class="homerow">
            <el-col :span="11" class="homecol">
              <div class="chartbox" ref="boxfive"></div>
            </el-col>
            <el-col :span="11" class="homecol">
              <div class="chartbox" ref="boxsix"></div>
            </el-col>
          </el-row>
          <el-row class="homerow">
            <el-col :span="22" class="homecol">
              <el-date-picker v-model="monthValue3" type="month" placeholder="选择月" value-format="yyyy-MM"
                @change="changeMonth_banner">
              </el-date-picker>
              <div v-show="isshowBanner" class="chartbox" ref="boxseven"></div>
              <el-empty v-show="!isshowBanner" :image-size="200"></el-empty>
            </el-col>
          </el-row>
        </div> -->
      </div>

    </div>
  </template>
  
  <script>
  import store from '@/store'
  import * as echarts from "echarts";
  import { getSevendays, getTerms, getToday, getCouponstsc, getLiulan, getChears, getBanners } from "../../../api/menu";
  export default {
    name: "Index",
    data() {
      return {
        // 版本号
        version: "3.8.7",
        todayData: {
          userLogin: 0,
          character: 0,
          orderPrice: 0.0,
          userAdd: 0,
          aftersakesPrice: 0.0,
        },
        isshow: true,
        isshowBanner: true,
        options: [
          {
            value: "1",
            label: "用户注册",
          },
          {
            value: "2",
            label: "订单",
          },
          {
            value: "3",
            label: "性格测试",
          },
        ],
        typeValue: "1",
        yearValue: new Date().getFullYear() + "",
        monthValue:
          new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "",
        monthValue2:
          new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "",
        monthValue3: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "",
        option: {
          title: {
            text: "近七日统计",
          },
          tooltip: {},
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["人数"],
          },
          xAxis: {
            data: [],
          },
          yAxis: {},
          series: [
            {
              name: "人数",
              type: "bar",
              data: [],
            },
          ],
        },
        option2: {
          title: {
            text: "近七日统计",
          },
          tooltip: {},
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["总金额", "售后退款"],
          },
          xAxis: [
            {
              type: "category",
              data: [],
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: {},
          series: [
            {
              name: "总金额",
              type: "bar",
              data: [],
            },
            {
              name: "售后退款",
              type: "bar",
              data: [],
            },
          ],
        },
        option3: {
          title: {
            text: "年统计",
          },
          tooltip: {},
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["注册人数"],
          },
          xAxis: {
            data: [],
          },
          yAxis: {},
          series: [
            {
              name: "注册人数",
              type: "bar",
              data: [],
            },
          ],
        },
        option4: {
          title: {
            text: "年统计",
          },
          tooltip: {},
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["总金额", "售后退款"],
          },
          xAxis: [
            {
              type: "category",
              data: [],
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: {},
          series: [
            {
              name: "总金额",
              type: "bar",
              data: [],
            },
            {
              name: "售后退款",
              type: "bar",
              data: [],
            },
          ],
        },
        option5: {
          title: {
            text: "月统计",
          },
          tooltip: {},
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["注册人数"],
          },
          xAxis: {
            data: [],
          },
          yAxis: {},
          series: [
            {
              name: "注册人数",
              type: "bar",
              data: [],
            },
          ],
        },
        option6: {
          title: {
            text: "月统计",
          },
          tooltip: {},
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["总金额", "售后退款"],
          },
          xAxis: [
            {
              type: "category",
              data: [],
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: {},
          series: [
            {
              name: "总金额",
              type: "bar",
              data: [],
            },
            {
              name: "售后退款",
              type: "bar",
              data: [],
            },
          ],
        },
        option7: {
          title: {
            text: "优惠券",
          },
          tooltip: {},
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["领取数量", "使用数量", "过期数量", "未使用"],
          },
          xAxis: [
            {
              type: "category",
              data: [],
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: {},
          series: [
            {
              name: "领取数量",
              type: "bar",
              data: [],
            },
            {
              name: "使用数量",
              type: "bar",
              data: [],
            },
            {
              name: "过期数量",
              type: "bar",
              data: [],
            },
            {
              name: "未使用",
              type: "bar",
              data: [],
            },
          ],
        },
        option8: {
          title: {
            text: "页面浏览数据统计",
          },
          tooltip: {},
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["人次"],
          },
          xAxis: {
            data: [],
          },
          yAxis: {},
          series: [
            {
              name: "人次",
              type: "bar",
              data: [],
            },
          ],
        },
        option9: {
          title: {
            text: "性格测试数据统计",
          },
          tooltip: {},
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["人次"],
          },
          xAxis: {
            data: [],
          },
          yAxis: {},
          series: [
            {
              name: "人次",
              type: "bar",
              data: [],
            },
          ],
        },
        option10: {
          title: {
            text: "首页banner点击数据统计",
          },
          tooltip: {},
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["人次"],
          },
          xAxis: {
            data: [],
          },
          yAxis: {
            minInterval:1
          },
          series: [
            {
              name: "人次",
              type: "bar",
              data: [],
              barWidth: '40', // 设置柱状图的宽度为类目宽度的50%
            },
          ],
        },
      };
    },
    computed: {
      isAdmin() {
        return store.getters.roles.some(item => item === 'admin')
      }
    },
    methods: {
      goTarget(href) {
        window.open(href, "_blank");
      },
      //今日统计
      gettodayData() {
        getToday().then((res) => {
          this.todayData = res.data;
        });
      },
      //页面浏览数据统计
      getLiulanData() {
        getLiulan().then((res) => {
          this.option8.xAxis.data = res.data.titles;
          this.option8.series[0].data = res.data.warkes;
        })
      },
      //性格测试数据统计
      getChearsData() {
        getChears().then((res) => {
          this.option9.xAxis.data = res.data.titles;
          this.option9.series[0].data = res.data.warkes;
        })
      },
      //优惠券统计
      getCoupon(year, month) {
        getCouponstsc({ year, month }).then((res) => {
          console.log(res.data.titles.length);
          if (res.data.titles.length == 0) {
            this.isshow = false;
          } else {
            this.isshow = true;
          }
          this.option7.xAxis[0].data = res.data.titles;
          this.option7.series[0].data = res.data.receives;
          this.option7.series[1].data = res.data.useds;
          this.option7.series[2].data = res.data.expires;
          this.option7.series[3].data = res.data.notUseds;
          this.boxoneInit();
        });
      },
      // 首页banner数据统计
      getBannerData(year, month) {
        getBanners({ year, month }).then((res) => {
          if (res.code === 200) {
            if (res.data.length == 0) {
              this.isshowBanner = false;
            } else {
              this.isshowBanner = true;
            }
            this.option10.xAxis.data = res.data.map(item => item.synopsis);
            this.option10.series[0].data = res.data.map(item => item.receive);
            this.boxoneInit();
          } else {
            console.log(123456)
            this.isshowBanner = false;
          } 
  
        });
      },
      //获取七日数据
      getSevendaysAsync(type) {
        getSevendays(type).then((res) => {
          console.log(res.data, 234);
          if (this.typeValue == 1) {
            this.option.series[0].data = res.data.userAdd;
            this.option.xAxis.data = res.data.title;
            this.option.legend.data[0] = "注册人数";
            this.option.series[0].name = "注册人数";
          } else if (this.typeValue == 2) {
            this.option2.series[0].data = res.data.orderPrice;
            this.option2.series[1].data = res.data.aftersakesPrice;
            this.option2.xAxis[0].data = res.data.title;
          } else {
            this.option.series[0].data = res.data.character;
            this.option.xAxis.data = res.data.title;
            this.option.legend.data[0] = "性格测试";
            this.option.series[0].name = "性格测试";
          }
          this.boxoneInit();
        });
      },
      //获取年月数据
      getTermsAsync(type, year, month) {
        getTerms(type, { year, month }).then((res) => {
          if (this.typeValue == 1) {
            this.option3.series[0].data = res.data.userAdd;
            this.option3.xAxis.data = res.data.title;
            this.option3.legend.data[0] = "注册人数";
            this.option3.series[0].name = "注册人数";
          } else if (this.typeValue == 2) {
            this.option4.series[0].data = res.data.orderPrice;
            this.option4.series[1].data = res.data.aftersakesPrice;
            this.option4.xAxis[0].data = res.data.title;
          } else {
            this.option3.series[0].data = res.data.character;
            this.option3.xAxis.data = res.data.title;
            this.option3.legend.data[0] = "性格测试";
            this.option3.series[0].name = "性格测试";
          }
          this.boxoneInit();
        });
      },
      getTermsAsync2(type, year, month) {
        getTerms(type, { year, month }).then((res) => {
          if (this.typeValue == 1) {
            this.option5.series[0].data = res.data.userAdd;
            this.option5.xAxis.data = res.data.title;
            this.option5.legend.data[0] = "注册人数";
            this.option5.series[0].name = "注册人数";
          } else if (this.typeValue == 2) {
            this.option6.series[0].data = res.data.orderPrice;
            this.option6.series[1].data = res.data.aftersakesPrice;
            this.option6.xAxis[0].data = res.data.title;
          } else {
            this.option5.series[0].data = res.data.character;
            this.option5.xAxis.data = res.data.title;
            this.option5.legend.data[0] = "性格测试";
            this.option5.series[0].name = "性格测试";
          }
          this.boxoneInit();
        });
      },
      //切换类型
      changeType(item) {
        console.log(item, 123);
        this.typeValue = item;
        let month = new Date().getMonth() + 1;
        this.getSevendaysAsync(item);
        this.getTermsAsync(item, this.yearValue);
        this.getTermsAsync2(item, this.yearValue, month);
        this.monthValue =
          new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "";
      },
      changeYear(item) {
        console.log(item);
        this.getTermsAsync(this.typeValue, item);
      },
      changeMonth(item) {
        let datas = item.split("-");
        this.getTermsAsync2(this.typeValue, datas[0], datas[1]);
        console.log(item.split("-"));
      },
      //优惠券切换月份
      changeMonth_coupon(item) {
        console.log(item);
        let datas = item.split("-");
        this.getCoupon(datas[0], datas[1]);
      },
      changeMonth_banner(item) {
        let datas = item.split("-");
        this.getBannerData(datas[0], datas[1]);
      },
      //初始化图表
      boxoneInit() {
        let myChart = echarts.init(this.$refs.boxone);
        let myChart2 = echarts.init(this.$refs.boxtwo);
        let myChart3 = echarts.init(this.$refs.boxthree);
        // let myChart4 = echarts.init(this.$refs.boxfour);
        // let myChart5 = echarts.init(this.$refs.boxfive);
        // let myChart6 = echarts.init(this.$refs.boxsix);
        // let myChart7 = echarts.init(this.$refs.boxseven);
       
        if (this.typeValue == 2) {
          myChart.setOption(this.option2, { notMerge: "true" });
          myChart2.setOption(this.option4, { notMerge: "true" });
          myChart3.setOption(this.option6, { notMerge: "true" });
        } else {
          myChart.setOption(this.option, { notMerge: "true" });
          myChart2.setOption(this.option3, { notMerge: "true" });
          myChart3.setOption(this.option5, { notMerge: "true" });
        }
        // myChart4.setOption(this.option7, { notMerge: "true" });
        // myChart5.setOption(this.option8, { notMerge: "true" });
        // myChart6.setOption(this.option9, { notMerge: "true" });
        // myChart7.setOption(this.option10, { notMerge: "true" });
  
        window.addEventListener("resize", function () {
          myChart.resize();
          myChart2.resize();
          myChart3.resize();
        //   myChart4.resize();
        //   myChart5.resize();
        //   myChart6.resize();
        //   myChart7.resize();
        });
      },
    },
    mounted() {
      console.log(this.isAdmin, 'isAdmin')
      this.boxoneInit();
      this.getSevendaysAsync(this.typeValue);
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      this.getTermsAsync(this.typeValue, year);
      this.getTermsAsync2(this.typeValue, year, month);
      this.gettodayData();
    //   this.getCoupon(year, month);
    //   this.getLiulanData()
    //   this.getChearsData()
    //   this.getBannerData(year, month)
    },
  };
  </script>
  
  <style scoped lang="scss">
  .mytabs {
    margin-top: 20px;
    margin-left: 50px;
  }
  
  .wrapbox {}
  
  .like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
  
  .top_box {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
  }
  
  .homecol2 {
    height: 400px;
    padding: 10px;
    text-align: right;
    margin-top: 20px;
  
    .chartbox {
      width: 100%;
      height: 100%;
    }
  }
  
  .homerow {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    padding-bottom: 10px;
  
    .homecol {
      height: 400px;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 10px;
      margin-top: 20px;
      text-align: right;
  
      .chartbox {
        width: 100%;
        height: 100%;
      }
    }
  }
  
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
  
    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }
  
    .col-item {
      margin-bottom: 20px;
    }
  
    ul {
      padding: 0;
      margin: 0;
    }
  
    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;
  
    ul {
      list-style-type: none;
    }
  
    h4 {
      margin-top: 0px;
    }
  
    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }
  
    p {
      margin-top: 10px;
  
      b {
        font-weight: 700;
      }
    }
  
    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
  </style>
  